<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表遍历和对象遍历</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <div class="root">
        <h1>人员列表</h1>
        <ul>
           <li v-for="item in persons">{{item.name}} -- {{item.age}}</li>
        </ul>

        <br/>
        <!--给每一条数据指定唯一键-->
        <ul>
            <li v-for="(item,index) in persons" :key = "index">{{item.name}} -- {{item.age}} -- {{index}}</li>
         </ul>
         <!--遍历数组-->
         <ul>
            <li v-for="(num,index) in arr" :key = "index">{{num}} -- {{index}}</li>
         </ul>
         <!--遍历对象 第一个值为value,第二个值为key -->
         <ul>
            <li v-for="(value,key) of car">{{a}}--{{b}}</li>
         </ul>
         <!--注意遍历字符串的时候先收到的是字符串中每一个字符，第二项是其对应的索引index-->
        <ul v-for="(c, index) of str" :key="index">
            <li>{{ index }} -- {{ c }}</li>
        </ul>
        <!--遍历指定次数-->
        <h2>遍历指定次数</h2>
        <!--注意遍历指定次数的时候先收到的是number(例如5，则number是1，2，3，4，5)，第二项是对应index(从0开始计数,则是0,1,2,3,4)-->
        <ul v-for="(num, index) in 5" :key="index">
            <li>{{ index }} -- {{ num }}</li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el: ".root",
            data: function(){
                return {
                    arr: [1,2,3,4,5,6,7,8,9],
                    persons:[{name:'zhangsan',age: 23,idCardNum:'10000001'},{name:'lisi',age: 27,idCardNum:'10000002'},{name:'wangwu',age: 26,idCardNum:'10000003'}],
                    car:{
                        color: "red",
                        length: "5550mm",
                        width: "3088mm"
                    },
                    str: "hello atguigu!!!"
                }
            }
        })
     </script>
</body>
</html>